<template>
    <rx-dialog :showok="false"  @cancel="cancel" :canceltext="$ti18('rxForm.closeBtn','关闭')">
        <rx-layout>
            <div slot="center">
                <a-form-model ref="form" :model="mdl" :label-col="labelCol" :wrapper-col="wrapperCol">
                    <a-row>
                        <a-col :span="12">
                            <a-form-model-item :label="i18n('form.service','所属服务')" prop="service">
                                {{mdl.service}}
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-model-item :label="i18n('form.apiName','接口名称')" prop="apiName">
                                {{mdl.apiName}}
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="12">
                            <a-form-model-item :label="i18n('form.method','请求方法')" prop="method">
                                {{mdl.method}}
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-model-item :label="i18n('form.path','路径')" prop="path">
                                {{mdl.path}}
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                    <a-row v-show="headersData.length>0">
                        <a-col :span="24">
                            <a-form-model-item :label="i18n('form.headers','请求头')" prop="headers" :label-col="labelCol1" :wrapper-col="wrapperCol1">
                                <rx-grid
                                    style="min-height:200px;"
                                    :bordered="true"
                                    ref="headersTable"
                                    :dataSource="headersData"
                                    :allowRowSelect="false"
                                    :showPage="false"
                                    :columns="columns"
                                >
                                </rx-grid>
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                    <a-row v-show="paramsData.length>0">
                        <a-col :span="24">
                            <a-form-model-item :label="i18n('form.params','参数')" prop="params"  :label-col="labelCol1" :wrapper-col="wrapperCol1">
                                <rx-grid
                                    style="min-height:200px;"
                                    :bordered="true"
                                    ref="paramsTable"
                                    :dataSource="paramsData"
                                    :allowRowSelect="false"
                                    :showPage="false"
                                    :columns="columns"
                                >
                                </rx-grid>
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                    <a-row v-show="bodyJson">
                        <a-col :span="24">
                            <a-form-model-item :label="i18n('form.body','请求体')" prop="body" :label-col="labelCol1" :wrapper-col="wrapperCol1">
                                <json-viewer  v-show="mdl.body" :value="bodyJson" :expand-depth="5" copyable boxed sort></json-viewer>
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                </a-form-model>
            </div>
        </rx-layout>
    </rx-dialog>
</template>
<script>
import SysExternalApiApi from '@/api/system/core/sysExternalApi'
import {RxDialog, BaseFormModel,Util} from "@lowcode/jpaas-common-lib";


export default {
    name: 'SysExternalApiDetail',
    mixins: [BaseFormModel],
    components: {
        RxDialog,
    },
    props:{
        layerid: String,
        destroy:Function
    },
    data() {
        return {
            columns: [
                { title: this.$ti18('rxList.index','序号'), scopedSlots: { customRender: 'serial' },dataIndex: 'serial',type:'indexColumn', width: '5%' },
                {title: this.i18n('form.paramName','参数名称'), dataIndex: 'headerName', width:100},
                {title: this.i18n('form.paramDesc','参数说明'), dataIndex: 'headerDesc', width:150},
                {title: this.i18n('form.paramType','参数类型'), dataIndex: 'paraType', width:100},
                {title: this.i18n('form.necessity','必要性'), dataIndex: 'required', width:150}
            ],
            headersData:[],
            paramsData:[],
            bodyJson:""
        }

    },
    methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"SysExternalApi",key);
        },
        onload_(values){
            if(values){
                this.headersData=values.headers?JSON.parse(values.headers):[];
                this.paramsData=values.params?JSON.parse(values.params):[];
                this.bodyJson=values.body?values.body:"";
            }
        },
        get(id) {
            return SysExternalApiApi.get(id);
        },
        save() {
            return SysExternalApiApi.save(this.mdl);
        },
        cancel(){
            Util.closeWindow(this,"cancel");
        }

    }
}
</script>
<style>
.relick a {
    margin-right: 10px;
}

</style>
